{% extends "base.html" %}

{% load static %}

{% block js %}
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="{% static 'lists/js/lists.js' %}"></script>
{% endblock %}

{% block body %}
<section class="header">
  <div class="row">
    <div class="three columns value-prop"></div>
    <div class="six columns">
      <div class="title">{{todolist.title}}</div>
      <form action="{% url 'lists:add_todo' todolist.id %}" method=post>
        {% csrf_token %}
        {{ form }}
        <input type="submit" value="Submit">
      </form>
    </div>
    <div class="row">
      <div class="one-half column open-todos">
        <h6 class="docs-header open-todos">{{ todolist.count_open }} open</h6>
        <ul>
          {% for todo in todolist.todos.all %}
            {% if not todo.is_finished %}
              <li><input type="checkbox" id="checkbox" data-todo-id="{{ todo.id }}"> {{ todo.description }}</li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
      <div class="one-half column finished-todos">
        <h6 class="docs-header finished-todos">{{ todolist.count_finished }} finished</h6>
        <ul>
          {% for todo in todolist.todos.all %}
            {% if todo.is_finished %}
            <li><input type="checkbox" id="checkbox" data-todo-id="{{ todo.id }}" checked="checked"> {{ todo.description }}</li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</section>
{% endblock %}
